<template>
  <div >
    <div class="search-common">
      <el-row class="mt10 pt10">
      <el-form :inline="true" :model="recodeForm" size="mini">
        <el-row>
          <el-col :sm="8">
               <el-form-item label="">
           <el-input placeholder="请输入内容" v-model="recodeForm.recode_name" class="input-with-select">
                <el-select v-model="recodeForm.recode_select" slot="prepend" placeholder="请选择" style="width:100px;">
                <el-option label="用户手机" value="1"></el-option>
                <el-option label="海贝昵称" value="2"></el-option>
                <el-option label="MT4账号" value="3"></el-option>
                </el-select>
            </el-input>
        </el-form-item>
          </el-col>

          <el-col :sm="12">
         <el-form-item label="经纪商">
            <el-select v-model="recodeForm.recode_angent" placeholder="经纪商">
                <el-option label="全部" value=""></el-option>
                <el-option 
                v-for="item of getAngents"
                :key="item.id"
                :label="item.name"
                :value="item.key"
               ></el-option>
            </el-select>
        </el-form-item>

          </el-col>
          

        </el-row>

        <el-row>
          <el-col :sm="8">
              <el-form-item label="申请时间">
           <el-date-picker
                v-model="recodeForm.recode_apply_date"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                 :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
          </el-col>
          <el-col :sm="12">
                 <el-form-item label="通过时间">
           <el-date-picker
                v-model="recodeForm.recode_ok_date"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                :picker-options="pickerOptions1"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <div >
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="default" @click="onReset">重置</el-button>
             </div>
        </el-form-item>
          </el-col>
        </el-row>


     
       

    
    </el-form>
      </el-row>
    </div>
     <div class="pl20 pr20 mt10" style="background:#fff" v-loading="loading">
            <br/>
      <el-table :data="tableData" border size="mini" style="width: 100%">

        <el-table-column prop="order_num"  label="申请编号">
        
        </el-table-column>

        <el-table-column prop="user_account" width="" label="用户手机">
           
        </el-table-column>

     <el-table-column prop="nickname"  label="海贝昵称">
       
        </el-table-column>

          <el-table-column   label="经纪商">
             <template slot-scope="scope">
            {{scope.row.agent_num | filterAgent}}
             </template>
        </el-table-column>

        <el-table-column prop="mt4_account"  label="MT4账号">
        </el-table-column>
             <el-table-column prop="goods_num"  label="消费商品编号">
        </el-table-column>

          <el-table-column prop="goods_name"  label="消费商品名称">
        </el-table-column>

          <el-table-column prop="integral"  label="花费积分">
        </el-table-column>

        <el-table-column prop="receiving_address"  label="配送地址">
                </el-table-column>

        <el-table-column prop="create_time"  label="申请时间">
                </el-table-column>
        <el-table-column prop="audit_time"  label="通过时间">
                </el-table-column>
            </el-table>
     
    <page-pagination 
      v-on:pageFun="pageFunNumber" 
      :page="page" 
      :pageSize="pageSize" 
      :total="total">
    </page-pagination>


    </div>
 
  </div>

</template>

<style scoped>
.el-table__body {
  /* width: 99%!important; */
  table-layout: inherit !important;
}
</style>


<script>
import pagePagination from "@/components/Common/pagePagination";
import server from "@/service/index_c";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 15,
      total: 0,
      tableData: [],
      recodeForm: {
        recode_name: "",
        recode_select: "1",
        recode_agent: "",
        recode_apply_date: "",
        recode_ok_date: "",
        phone: "",
        mt4account: "",
        nickname: "",
        recode_angent:''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
       pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    this.$store.dispatch("setAllAngentLists",'officel');
    
  },
  mounted() {
    this.queryHaiheiQueryGoodConsumedList();
  },
  computed: {
    ...mapGetters({
      getAngents: "getAllAngentLists"
    })
  },

  methods: {
    async queryHaiheiQueryGoodConsumedList(page = 1) {
      this.loading = true;
      let params = {
        page: page,
        pageSize: this.pageSize,
        phone: this.recodeForm.recode_select == 1?this.recodeForm.recode_name:'',
        nickname: this.recodeForm.recode_select == 2?this.recodeForm.recode_name:'',
        mt4account: this.recodeForm.recode_select == 3?this.recodeForm.recode_name:'',
        agent_num: this.recodeForm.recode_angent,
        create_starttime: this.recodeForm.recode_apply_date?this.recodeForm.recode_apply_date[0]: '',
        create_endtime: this.recodeForm.recode_apply_date?this.recodeForm.recode_apply_date[1]: '',
        audit_starttime: this.recodeForm.recode_ok_date?this.recodeForm.recode_ok_date[0]:'',
        audit_endtime: this.recodeForm.recode_ok_date?this.recodeForm.recode_ok_date[1]: ''
      };
      console.log(params)
      let resultData = await server.haiheiQueryGoodConsumedByPage(params);
      if (resultData.success) {
        this.loading = false;
        this.tableData = resultData.result.pageList;
        this.page = resultData.result.page;
        this.total = resultData.result.nums;
      } else {
        this.$message({
          type: "error",
          message: resultData.msg
        });
      }
    },
    //查询
    onSubmit() {
      this.queryHaiheiQueryGoodConsumedList();
    },
    // 重置
    onReset() {
      this.recodeForm = {
        recode_name: "",
        recode_select: "1",
        recode_agent: "",
        recode_date: ""
      };
      this.queryHaiheiQueryGoodConsumedList();
    },
    //分页
    pageFunNumber(page) {
  
     this.queryHaiheiQueryGoodConsumedList(page);
    }
  },
  components:{
    pagePagination
  }
};
</script>
